<div>
  <div class="flex items-center" [class.flex-row-reverse]="msgItem?.isSelf">
    <img
      [src]="msgItem?.userInfo.avatar"
      class="rounded w-12 h-12"
      [routerLink]="[
        '/personalInfo',
        msgItem?.isSelf ? '' : msgItem?.userInfo.id
      ]"
    />
    <div
      class="mx-2 flex flex-col justify-between h-12"
      [class.text-right]="msgItem?.isSelf"
    >
      <div class="text-gray-800">{{ msgItem?.userInfo.name }}</div>
      <div class="text-gray-600">{{ msgItem?.createDate }}</div>
    </div>
  </div>
  <div class="flex items-center" [class.flex-row-reverse]="msgItem?.isSelf">
    <div
      class="mt-4 p-4 w-3/4 rounded-lg relative bg-gray-600 bubble inline-block text-white shadow-md break-all"
      [class.text-right]="msgItem?.isSelf"
      [class.bg-pink-500]="msgItem?.isSelf"
      [class.text-left]="!msgItem?.isSelf"
    >
      {{ msgItem?.msg }}
      <div *ngFor="let file of msgItem?.files">
        <img
          *ngIf="file.mimetype.indexOf('image') > -1"
          [src]="file.$uri | async"
          class="w-full"
        />
      </div>
      <div class="text-gray-600 arrow"></div>
    </div>
    <div class="loadding" *ngIf="msgItem?.loading"></div>
  </div>
</div>
